<template>
  <div>
    <headerView></headerView>
    <!--中间-->
    <div class="product">
      <!--头上表格-->
      <div class="product-table">
        <div class="product-left">
          <table class="table table-bordered">
            <tr class="text-center">
              <td class="title-td">
                <router-link to="/new_product">基本信息</router-link>
              </td>
              <td class="active title-td">
                <router-link to="new_info">项目信息</router-link>
              </td>
              <td class="title-td">
                <router-link to="new_detail">详细描述</router-link>
              </td>
              <td class="title-td">
                <router-link to="new_back">回报设置</router-link>
              </td>
            </tr>
          </table>
        </div>
        <div class="product-right">
          <table class="table table-bordered">
            <tr class="text-center">
              <td class="title-td">预览</td>
            </tr>
          </table>
        </div>
      </div>
      <!--下部foem表单-->
      <div class="product-form">
        <!--上标题-->
        <div class="product-title">
          <div class="my-h4">
            <h4>设置你的回报信息</h4>
          </div>
          <div class="btn-save">
            <button class="btn btn-default">保存草稿</button>
          </div>
        </div>
        <div class="clear"></div>
        <hr />
        <!--描述项目-->
        <div class="product-title">
          <div class="my-h4">
            <h4><b>回报1</b></h4>
          </div>
        </div>
        <div class="clear"></div>
        <hr />
        <!--编辑信息表单-->
        <form action="#">
          <div class="my-form">
            <div class="back">
              <b>回报类型：</b>
              <label class="radio-inline">
                <input
                  type="radio"
                  name="optionsRadiosinline"
                  id="optionsRadios3"
                  value="1"
                  v-model="formData.type"
                  checked
                />
                <b>实物回报(回报需邮寄)</b>
              </label>
              <label class="radio-inline">
                <input
                  type="radio"
                  name="optionsRadiosinline"
                  id="optionsRadios4"
                  value="2"
                  v-model="formData.status"
                />
                <b>虚拟回报(回报无需邮寄)</b>
              </label>
            </div>
            <div class="back">
              <b>支持金额：</b
              ><input
                class="input-mon"
                placeholder="输入需要用户支持的金额"
                v-model="formData.paymoney"
              />元
            </div>
            <div class="back">
              <b>具体规则：</b>每
              <input
                class="input-per"
                placeholder="此项必填"
                v-model="formData.rule"
              />
              支持者抽出1名中奖者
            </div>
            <div class="back">
              <b>回报内容：</b>
              <div>
                <textarea
                  rows="2"
                  placeholder="一句话介绍一下你的项目吧"
                  v-model="formData.content"
                ></textarea>
              </div>
            </div>
            <div class="back">
              <b>人数上限：</b
              ><input
                class="input-num"
                placeholder="0"
                v-model="formData.number"
              />个<small>"0"为不需要名额</small>
            </div>
            <div class="back">
              <b>回报时间：</b
              ><input
                class="input-num"
                placeholder="0"
                v-model="formData.time"
              />天<small>"0"为开奖后立即发送</small>
            </div>
            <div class="clear"></div>
            <hr />
            <div class="text-center">
              <button class="btn btn-primary" @click="deleteAll()">删除</button
              ><button class="btn" @click="saveAll()">保存</button>
            </div>
            <br />
          </div>
        </form>
        <div class="text-center"><a href="#">+继续添加新的回报</a></div>
      </div>
    </div>
    <!--下部-->
    <div id="bottom">
      <blowView></blowView>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      formData: {
        type: "1",
        paymoney: "",
        rule: "",
        content: "",
        number: "",
        time: "",
        productId: "",
      },
    };
  },
  created(){
    console.log("上面")
    console.log(sessionStorage.removeItem("forms3"));
    console.log("上面")
  },
  methods: {
    // 保存草稿
    saveBack() {
      console.log(JSON.stringify(this.formData));
      sessionStorage.setItem("forms5", JSON.stringify(this.formData));
    },
    // 删除
    deleteAll() {
      // 清除session中的东西，清除所有输入框中的东西
      sessionStorage.removeItem("forms1");
      sessionStorage.removeItem("forms2");
      // sessionStorage.removeItem("forms3");
      sessionStorage.removeItem("forms4");
      this.formData.type = "1",
      this.formData.paymoney = "",
      this.formData.rule = "",
      this.formData.content = "",
      this.formData.number = "",
      this.formData.time = "";
    },
    // 保存--代表进行提交操作了
    saveAll() {
      // 将session中的数据全部取出
      let form1 = sessionStorage.getItem("forms1");
      let form2 = sessionStorage.getItem("forms2");
      // let form3 = sessionStorage.getItem("forms3");
      let form4 = sessionStorage.getItem("forms4");
      if (
        (form1 != null || form1 != "") &&
        (form2 != null || form2 != "") &&
        (form4 != null || form4 != "")
      ) {
        // 将表单上的数据全部取出
        let product = {};
        product.userName = JSON.parse(form1).username,
        product.idcard = JSON.parse(form1).idcard,
        product.phone = JSON.parse(form1).phone,
        product.serviceName = JSON.parse(form1).service_name,
        product.servicePhone = JSON.parse(form1).service_phone,
        product.typeId = JSON.parse(form1).type_id.id,
        product.title = JSON.parse(form2).title,
        product.imageUrl = JSON.parse(form2).image_url,
        product.goal = JSON.parse(form2).goal,
        product.cityId = JSON.parse(form2).city_id,
        product.money = JSON.parse(form2).money,
        product.days = JSON.parse(form2).days,
        product.video = JSON.parse(form4).video,
        product.story = JSON.parse(form4).story,
        product.providereturns = JSON.parse(form4).provideReturns,
        product.aboutme = JSON.parse(form4).aboutme;
        console.log(product);

 
        let repay = {};
        repay.type = this.formData.type,
        repay.paymoney = this.formData.paymoney,
        repay.rule = this.formData.rule,
        repay.content = this.formData.content,
        repay.number = this.formData.number,
        repay.time = this.formData.time,
        repay.productId = "";
        console.log(repay);
        // 发送同步请求，进行处理，先发送过去product信息，再把上传的文件发送给后端
        // 发送ajax请求给后端，发送新增的product项目信息
        // 发送文件给后端，把上传的文件发送给后端
        // var response1 = await this.$axios.post('http://localhost:8080/addProduct',product)
        //   if (response1.data.code == 0) {
        //   console.log("项目发布失败了！！！");
        // } else {
        //   console.log("项目发布成功了！！！");
        //   repay.productId = response1.data.data;
        // }


        this.$axios.post('http://localhost:8080/addProduct',product).then(response => {
          if (response.data.code === 0) {
          console.log("项目发布失败了！！！");
        } else {
          console.log("项目发布成功了！！！");
          repay.productId = response.data.data;
          axios.post('http://localhost:8080/addRepay',repay).then(response => {
          if (response.data.code === 0) {
          console.log("回报添加失败了！！！");
        } else {
          console.log("回报添加成功");
          this.$router.push('/index')
        }
        });
        }
        });

/*         //发送文件给后端，把上传的文件发送给后端
        this.$axios.post('http://localhost:8080/upload',form3,{
          headers: {
              'Content-Type': 'multipart/form-data',
            }
        }).then(response => {
            if(response.data.code===0){
              console.log("文件上传下载失败了！！！")
            }else{
              console.log(response.data.data)
            }
        }); */
      } else {
        console.log("发送的信息里面有空的啊！！！");
      }
    },
  },
};
</script>

<style scoped>
@import url("../../public/css/bootstrap.min.css");
@import url("../../public/css/base.css");
@import url("../../public/css/headbott.css");
@import url("../../public/css/index.css");
@import url("../../public/css/ly-list.css");
@import url("../../public/css/reg.css");
@import url("../../public/css/style.css");
@import url("../../public/css/back.css");
</style>